<template>
  <div class="activitycontent">
    <ul class="activitylist">
      <li>
        <p class="title">【修心养生】中年/老年人如何休养身心</p>
        <div class="desc">
          <p>活动时间：6月12日 周三 9:00~12:00</p>
          <p>参加人：张三</p>
          <p>报名时间：2016-6-1 12:12</p>
          <p>状态：<span class="orderstatus">待付款</span></p>
        </div>
        <div class="buttonlist">
          <span>邀请他人代付</span>
          <span class="action" v-link="{name:'payment',param:{}}">去付款</span>
        </div>
        <div class="flex" @click=" isJoin=true ">
          <p class="title invite-title">本活动可邀请2位好友免费参加</p>
          <i class="icon icon-arrow"></i>
        </div>
      </li>
      <li>
        <p class="title">【修心养生】中年/老年人如何休养身心</p>
        <div class="desc">
          <p>活动时间：6月12日 周三 9:00~12:00</p>
          <p>参加人：张三</p>
          <p>报名时间：2016-6-1 12:12</p>
          <p>状态：<span class="orderstatus">已付款</span></p>
        </div>
        <div class="buttonlist" @click="returnMoney()">
          <span>申请退款</span>
        </div>
      </li>

      <li>
        <p class="title">【修心养生】中年/老年人如何休养身心</p>
        <div class="desc">
          <p>活动时间：6月12日 周三 9:00~12:00</p>
          <p>参加人：张三</p>
          <p>报名时间：2016-6-1 12:12</p>
          <p>状态：<span class="orderstatus">退款中</span></p>
        </div>
        <div class="buttonlist">

        </div>
      </li>

      <li>
        <p class="title">【修心养生】中年/老年人如何休养身心</p>
        <div class="desc">
          <p>活动时间：6月12日 周三 9:00~12:00</p>
          <p>参加人：张三</p>
          <p>报名时间：2016-6-1 12:12</p>
          <p>状态：<span class="orderstatus">已退款</span></p>
        </div>
        <div class="buttonlist">

        </div>
      </li>
      <li>
        <p class="title">【修心养生】中年/老年人如何休养身心</p>
        <div class="desc">
          <p>活动时间：6月12日 周三 9:00~12:00</p>
          <p>参加人：张三</p>
          <p>报名时间：2016-6-1 12:12</p>
          <p>状态：<span class="orderstatus">已结束</span></p>
        </div>
        <div class="buttonlist">
        </div>
      </li>
      <li>
        <p class="title">【修心养生】中年/老年人如何休养身心</p>
        <div class="desc">
          <p>活动时间：6月12日 周三 9:00~12:00</p>
          <p>参加人：张三</p>
          <p>报名时间：2016-6-1 12:12</p>
          <p>状态：<span class="orderstatus">已取消</span></p>
        </div>
        <div class="buttonlist">
        </div>
      </li>
    </ul>

    <v-join :isshow="isJoin" v-on:hideDialog="hideDialog"></v-join>
    <div class="blackbg" v-if="isJoin" @click="isJoin=false"></div>
  </div>
</template>
<script>
  import Join from './join'
  export default({
    data () {
      return {
        'isJoin': false
      }
    },
    methods: {
      hideDialog () {
        this.isJoin = true
      },
      returnMoney () {
        this.$router.push({name: 'returnMoney'})
      }
    },
    components: {
      'v-join': Join
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/redifined.styl"
  .activitycontent
    overflow-y: auto;
    position: fixed;
    width: 100%;
    height: 100%;
    padding-bottom: 1rem;
    .activitylist
      padding cal(20) rem
      padding-top 0
      li
        background #fff
        border-radius 5px
        overflow hidden
        margin-top cal(20) rem
        p
          setFontsize(16px)
          color #666
        .title
          setFontsize(18px)
          color #333
          text-indent cal(-12) rem
          line-height cal(88) rem
          padding-left cal(30) rem
          border-bottom bordercolor
          &.invite-title
            setFontsize(16px)
            color #999
        .desc
          padding-left cal(30) rem
          padding-top cal(30) rem
          p
            line-height: 0.8rem;
          .orderstatus
            color yellowColor
        .buttonlist
          float right
          margin-bottom cal(30) rem
          margin-right cal(20) rem
          span
            setFontsize(12px)
            display inline-block
            padding cal(20) rem
            padding-top cal(15) rem
            padding-bottom cal(15) rem
            border 1px solid #999
            color #666
            border-radius 3px
            &.action
              background yellowColor
              color #fff
              border-color yellowColor
              margin-left cal(20) rem
        .flex
          clear both
          border-top bordercolor
          .invite-title
            flex 1 1 auto
            border-bottom none
          .icon.icon-arrow
            align-self center
            background-position -0.2rem -6.5rem

</style>
